<template>
	<app-layout>
		<view class="contetn">
			<view class="follow" @click="tomine(item)" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.videoUser.userInfo.avatar" mode=""></image>
				<view class="nickname">
					{{item.videoUser.nickname}}
				</view>
				<view class="cancel" @click.stop="changFollow(item)"
					v-if="item.video_id != userInfo.options.user_id && item.isfocus == 0">
					关注
				</view>
				<view class="cancel" @click.stop="cancel(item.video_id)" v-if="item.isfocus == 1">
					取消关注
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无关注
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 20,
				pagecount: 1,
				user_id: 0
			}
		},
		onLoad(options) {
			if (options.user_id) {
				this.user_id = options.user_id
			} else {
				this.user_id = this.userInfo.options.user_id
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.pagecount = 1
			this.loadList()
		},
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.loadList()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		methods: {
			changFollow(item) {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken ===
					null) {
					this.$store.dispatch('user/accessToken');
					return;
				}
				this.addFollow(item);
			},
			addFollow(item) {
				this.$request({
					url: this.$api.sixty.addfollow,
					data: {
						target_id: item.video_id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						item.isfocus = 1
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},
			loadList() {
				this.$showLoading()
				this.$request({
					url: this.$api.sixty.followlist,
					data: {
						page: this.page,
						limit: this.limit,
						user_id: this.user_id
					}
				}).then(res => {
					this.$hideLoading()
					this.list = this.list.concat(res.data.list)
					this.pagecount = res.data.pagination.page_count
				}).catch(err => {
					this.$hideLoading()
					console.log(err);
				})
			},
			tomine(item) {
				uni.navigateTo({
					url: '/pages/sixty/user-center/user-center?user_id=' + item.video_user_id
				})
			},
			cancel(user_id) {
				this.$request({
					url: this.$api.sixty.delfollow,
					data: {
						target_id: user_id
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '已取消关注'
						})
						setTimeout(() => {
							this.list = []
							this.page = 1
							this.pagecount = 1
							this.loadList()
						}, 500)
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contetn {
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
	}

	.follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: auto;
			padding: 0 20rpx;
		}

		.cancel {
			padding: 10rpx 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
		}
	}

	.follow+.follow {
		border-top: 1rpx solid #dcdcdc;
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}
</style>
